<template>
  <div class="basicInfo">
    <el-row class="basicInfo_row_one">
      <el-col :span="12" class="basicInfo_row_one_col_one">
        <el-select size="small " class="row_one_select" v-model="deptNum" placeholder="请选择部门">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.deptName"
            :value="item.deptNum">
          </el-option>
        </el-select>
        <el-input size="small " prefix-icon="el-icon-search" class="row_one_input" v-model="keyWord"
                  placeholder="请输入工号或姓名"></el-input>
      </el-col>
      <el-col :span="12" class="basicInfo_row_one_col_two">
        <el-button size="small " style="background-color: #0BB278" @click="addEmployee" type="primary">新增员工</el-button>
        <el-button size="small " style="background-color: #0BB278" type="primary">导入花名册</el-button>
        <el-button size="small " type="danger">删除员工</el-button>
      </el-col>
    </el-row>
    <el-row class="basicInfo_row_three">
      <div class="basicInfo_row_three_div_one_one" :style="one || two?'border:1px solid #0BB278':'border: 0px'">
        <div class="left_card_one" @click="changeStyle('one')">
          <div class="one_one_div_one">
            <div style="border-right: 1px solid #e1e6eb">
              <span class="font_one" :style="one?'color: #0BB278':''">在职</span>
              <span class="font_two" :style="one?'color: #0BB278':''">{{ statusNum.onthejob }}</span>
              <span class="font_one" :style="one?'color: #0BB278':''">人</span>
            </div>
          </div>
        </div>
        <div class="left_card_two" @click="changeStyle('two')">
          <div class="one_one_div_two">
            <div>
              <span class="font_one" :style="two?'color: #0BB278':''">全职</span>
            </div>
            <div>
              <span class="font_one" style="line-height: 40px"
                    :style="two?'color: #0BB278':''">{{ statusNum.fulltime }}</span>
              <span class="font_one" :style="two?'color: #0BB278':''">人</span>
            </div>
          </div>
        </div>

      </div>
      <div class="basicInfo_row_three_div_one_two"
           :style="three || four || five?'border:1px solid #0BB278':'border: 0px'">
        <div class="middle_card_one" @click="changeStyle('three')">
          <div class="one_two_div_one" style="border-right: 1px solid #e1e6eb">
            <div>
              <span class="font_one" :style="three?'color: #0BB278':''">实习期</span>
            </div>
            <div>
              <span class="font_one" style="line-height: 40px"
                    :style="three?'color: #0BB278':''">{{ statusNum.practice }}</span>
              <span class="font_one" :style="three?'color: #0BB278':''">人</span>
            </div>
          </div>
        </div>
        <div class="middle_card_one" @click="changeStyle('four')">
          <div class="one_two_div_one" style="border-right: 1px solid #e1e6eb">
            <div>
              <span class="font_one" :style="four?'color: #0BB278':''">试用期</span>
            </div>
            <div>
              <span class="font_one" style="line-height: 40px"
                    :style="four?'color: #0BB278':''">{{ statusNum.tryout }}</span>
              <span class="font_one" :style="four?'color: #0BB278':''">人</span>
            </div>
          </div>
        </div>
        <div class="middle_card_one" @click="changeStyle('five')">
          <div class="one_two_div_one">
            <div>
              <span class="font_one" :style="five?'color: #0BB278':''">正式</span>
            </div>
            <div>
              <span class="font_one" style="line-height: 40px" :style="five?'color: #0BB278':''">{{
                  statusNum.formal
                }}</span>
              <span class="font_one" :style="five?'color: #0BB278':''">人</span>
            </div>
          </div>
        </div>
      </div>
      <div class="basicInfo_row_three_div_one_three" :style="six || seven?'border:1px solid #0BB278':'border: 0px'">
        <div class="right_card_one" @click="changeStyle('six')">
          <div class="one_three_div_one" style="border-right: 1px solid #e1e6eb">
            <div>
              <span class="font_one" :style="six?'color: #0BB278':''">待入职</span>
            </div>
            <div>
              <span class="font_one" style="line-height: 40px" :style="six?'color: #0BB278':''">{{
                  statusNum.tobehired
                }}</span>
              <span class="font_one" :style="six?'color: #0BB278':''">人</span>
            </div>
          </div>
        </div>
        <div class="right_card_one" @click="changeStyle('seven')">
          <div class="one_three_div_one">
            <div>
              <span class="font_one" :style="seven?'color: #0BB278':''">已离职</span>
            </div>
            <div>
              <span class="font_one" style="line-height: 40px" :style="seven?'color: #0BB278':''">{{
                  statusNum.resign
                }}</span>
              <span class="font_one" :style="seven?'color: #0BB278':''">人</span>
            </div>
          </div>
        </div>

      </div>
    </el-row>
    <el-row class="basicInfo_row_two">
      <el-table
        :data="employeeArray.slice((currentPage - 1) * pagesize,pagesize*currentPage)"
        width="100%"
        height="90%"
        stripe
        style="font-size: 10px"
      >
        <el-table-column type="selection">
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="employeeJobNumber"
          label="员工工号"
        >
        </el-table-column>
        <el-table-column
          prop="employeeName"
          label="员工姓名"
        >
        </el-table-column>
        <el-table-column
          prop="employeeGender"
          label="员工性别"
        >
        </el-table-column>
        <el-table-column
          prop="employeeDepartmentName"
          label="员工部门"
        >
        </el-table-column>
        <el-table-column
          prop="employeePositionName"
          label="员工职位"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          prop="employeeEntryDate"
          label="员工入职日期"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
        >
          <template v-slot="scope">
            <el-button v-show="scope.row.employeeStatus != '已离职'" size="small " type="primary" icon="el-icon-edit" circle
                       @click.native.prevent="selBrawer(scope.row)"></el-button>
            <el-button class="button_four" size="small " type="success" icon="el-icon-more" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-drawer
        :visible.sync="brawer"
        title="编辑员工信息"
        :before-close="function (done){ return closure(done, 'ruleForm')}"
      >
        <div class="el-drawer_div_one">
          <el-form label-width="80px" :label-position="labelPosition" :model="ruleForm" ref="ruleForm" :rules="rules"
                   class="demo-ruleForm" size="small">
            <el-form-item label="提示" prop="text">
              <span class="el-drawer_font">{{ text }}</span>
            </el-form-item>
            <el-form-item label="姓名" prop="employeeName">
              <el-input style="width: 70%" v-model="ruleForm.employeeName"></el-input>
            </el-form-item>
            <el-form-item label="工号">
              <el-input disabled style="width: 70%" v-model="ruleForm.employeeJobNumber"></el-input>
            </el-form-item>
            <el-form-item label="个人邮箱" prop="employeeEmail">
              <el-input placeholder="请输入..." size="small" style="width: 70%" v-model="ruleForm.employeeEmail"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="employeePhone">
              <el-input size="small" style="width: 70%" placeholder="请输入..." v-model="ruleForm.employeePhone">
                <el-select style=" width: 80px" v-model="phoneAreaCode" slot="prepend" placeholder="请选择">
                  <el-option-group
                    v-for="group in phoneOptions"
                    :key="group.label"
                    :label="group.label"
                  >
                    <el-option
                      v-for="item in group.options"
                      :key="item.value"
                      :label="item.value"
                      :value="item.value"
                    >
                      <span>{{ item.value }}</span>
                      <span>{{ item.label }}</span>
                    </el-option>
                  </el-option-group>
                </el-select>
              </el-input>
            </el-form-item>
            <el-form-item  label="联系地址"  required>
              <el-col :span="24" >
                <el-form-item style="margin-bottom: 0px" prop="cascaderAddress">
                  <Cascader :ars="ars" style="width: 70%;" @address="getAddress"></Cascader>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item style="margin-bottom: 0px" prop="detailedAddress">
                  <el-input placeholder="请输入详细地址" size="small" style="width: 70%;"
                            v-model="ruleForm.detailedAddress"
                            clearable></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="证件号码" prop="employeeIDNum">
              <el-input clearable style="width: 70%" v-model="ruleForm.employeeIDNum"></el-input>
            </el-form-item>
            <el-form-item label="民族" prop="employeeEthnic">
              <el-input placeholder="请输入..." size="small" style="width: 70%" v-model="ruleForm.employeeEthnic"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="employeeGender">
              <el-radio-group v-model="ruleForm.employeeGender">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div class="el-drawer_div_two">
            <button class="el-drawer_div_two_button_one" @click="function (){ return closure('', 'ruleForm')}">取消
            </button>
            <button class="el-drawer_div_two_button_two" @click="updateEmployeeInfo">保存</button>
          </div>
        </div>
      </el-drawer>
    </el-row>
    <div class="basicInfo_row_four">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="employeeArray.length">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import svgIcon from "../components/SvgIcon/index.vue";
import Cascader from "../components/cascader";
export default {
  components: {svgIcon , Cascader},
  data() {
    var employeeEmailVerify = (rule, value, callback) => {
      if (value.indexOf("@") == -1 || value.indexOf("@") == 0) {
        callback(new Error('邮箱格式有误'));
      } else {
        callback();
      }
    }
    var employeePhoneVerify = (rule, value, callback) => {
      if (value == undefined || Object.keys(value).length == 0) {
        callback(new Error('手机号不可为空'));
      } else {
        var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!myreg.test(value)) {
          callback(new Error('输入手机号格式有误'));
        } else {
          callback();
        }
      }
    }
    var detailedAddressVerify = (rule, value, callback) => {
      if (value == undefined || Object.keys(value).length == 0) {
        callback(new Error('请填写完整的联系地址'));
      } else {
        callback();
      }
    }

    return {
      //部门选择信息列表
      options: [],
      //选择的部门信息
      deptNum: '',
      //关键字
      keyWord: '',
      //在职状态
      employeeStatus: '',
      //工作性质
      employeeWorkNature: '',
      //员工信息列表
      employeeArray: [],
      //点击之后的样式
      one: false,
      two: false,
      three: false,
      four: false,
      five: false,
      six: false,
      seven: false,
      statusNum: {
        //在职
        onthejob: 0,
        //已离职
        resign: 0,
        //待入职
        tobehired: 0,
        //实习期
        practice: 0,
        //试用期
        tryout: 0,
        //正式
        formal: 0,
        //全职
        fulltime: 0,
      },
      //每页条数
      pagesize: 5,
      //起始页
      currentPage: 1,
      //抽屉
      brawer: false,
      oldRuleForm: {},
      ruleForm: {
        //id
        employeeID: '',
        //名字
        employeeName: '',
        //工号
        employeeJobNumber: '',
        //证件号码
        employeeIDNum: '',
        //下拉地址
        cascaderAddress: '',
        //填写的详细地址
        detailedAddress: '',
        //民族
        employeeEthnic: '',
        //个人邮箱
        employeeEmail: '',
        //手机号
        employeePhone: '',
        //性别
        employeeGender: '',
      },
      text: '修改部门、岗位、职务、职级等信息建议通过人事异动完成，否则无法生成任职记录和员工成长记录',
      rules: {
        employeeName: [
          {required: true, message: '请输入名字', trigger: 'blur'},
        ],
        employeeIDNum: [
          {required: true, message: '请输入证件号', trigger: 'blur'},
          {min: 18, max: 18, message: '证件号码长度为18位', trigger: 'blur'}
        ],
        employeeEmail: [
          {required: true, message: '邮箱不可为空', trigger: "blur"},
          {validator: employeeEmailVerify, trigger: 'blur'}
        ],
        employeePhone: [
          {required: true, validator: employeePhoneVerify, trigger: 'blur'}
        ],
        cascaderAddress: [
          {required: true, message: '请选择地址', trigger: 'change'}
        ],
        detailedAddress: [
          {validator: detailedAddressVerify, trigger: 'blur'}
        ],
        employeeGender: [
          {required: true, message: '请选择性别', trigger: 'change'}
        ],

      },
      //对齐方式
      labelPosition: 'right',
      optionsTwo: [],
      optionsPost: [],
      //当前点击的样式所属
      nowStyle: "",
      //默认手机区号：
      phoneAreaCode: '+86',
      //手机号下拉列表
      phoneOptions: [
        {
          label: '常用',
          options: [
            {
              value: '+86',
              label: '中国大陆',
            },
            {
              value: '+853',
              label: '中国澳门',
            },
            {
              value: '+886',
              label: '中国台湾',
            },
            {
              value: '+852',
              label: '中国香港',
            },
          ]
        }
      ],
      //回显的地址列表
      ars: [],
    };

  },
  methods: {

    //获取地址
    getAddress(data) {
      this.ruleForm.cascaderAddress = data;
    },


    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },

    //关闭抽屉
    closure(done, name) {
      this.$refs[name].resetFields();
      this[name] = this.$options.data()[name];
      this.brawer = false;
    },


    //查询公司部门信息
    selEmDepartmentInfo() {
      let params = new URLSearchParams();
      this.$api.selEmDepartmentInfo(params)
        .then(res => {
          if (res.code === "200") {
            this.options = res.data;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$message.error("页面出错，请联系管理员")
        })
    },


    //查询公司员工信息
    selEmployeeInfo() {
      let params2 = new URLSearchParams();
      params2.append("employeeStatus", this.employeeStatus);
      params2.append("deptNum", this.deptNum);
      params2.append("keyWord", this.keyWord);
      this.$api.selEmployeeInfo(params2)
        .then(res => {
          if (res.code === "200") {
            this.employeeArray = res.data;
          } else if (res.code === "400") {
            this.employeeArray = [];
            this.$message.warning(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$notify.error({
            title: '错误',
            message: '页面出错，请联系管理员'
          });
        })
    },


    //查询不同状态的人数
    selworkStatusNum() {
      let params = new URLSearchParams();
      this.$api.selworkStatusNum(params)
        .then(res => {
          if (res.code === "200") {
            this.statusNum.onthejob = res.data.onthejob;
            this.statusNum.resign = res.data.resign;
            this.statusNum.tobehired = res.data.tobehired;
            this.statusNum.practice = res.data.practice;
            this.statusNum.tryout = res.data.tryout;
            this.statusNum.formal = res.data.formal;
            this.statusNum.fulltime = res.data.fulltime;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          this.$notify.error({
            title: '错误',
            message: '页面出错，请联系管理员'
          });
        })
    },


    //点击更改样式
    changeStyle(type) {
      //初始化
      this.one = false;
      this.two = false;
      this.three = false;
      this.four = false;
      this.five = false;
      this.six = false;
      this.seven = false;
      switch (type) {
        case 'one':
          this.one = true;
          this.employeeStatus = "在职";
          this.selEmployeeInfo();
          break;
        case 'two':
          this.two = true;
          this.employeeStatus = "全职";
          this.selEmployeeInfo();
          break;
        case 'three':
          this.three = true;
          this.employeeStatus = "实习期";
          this.selEmployeeInfo();
          break;
        case 'four':
          this.four = true;
          this.employeeStatus = "试用期";
          this.selEmployeeInfo();
          break;
        case 'five':
          this.five = true;
          this.employeeStatus = "正式";
          this.selEmployeeInfo();
          break;
        case 'six':
          this.six = true;
          this.employeeStatus = "待入职";
          this.selEmployeeInfo();
          break;
        case 'seven':
          this.seven = true;
          this.employeeStatus = "已离职";
          this.selEmployeeInfo();
          break;
      }
    },


    //显示抽屉，并回显数据
    selBrawer(data) {
      this.brawer = true;
      //id
      this.ruleForm.employeeID = data.employeeID;
      //姓名
      this.ruleForm.employeeName = data.employeeName;
      //工号
      this.ruleForm.employeeJobNumber = data.employeeJobNumber;
      //邮箱
      this.ruleForm.employeeEmail = data.employeeEmail;
      //性别
      this.ruleForm.employeeGender = data.employeeGender;
      //民族
      this.ruleForm.employeeEthnic = data.employeeEthnic;
      //身份证号
      this.ruleForm.employeeIDNum = data.employeeIDNum;
      //手机号拆分
      var num = data.employeePhone;
      this.ruleForm.employeePhone = num.substring(num.length-11 , num.length);
      this.phoneAreaCode = num.replace(this.ruleForm.employeePhone , "");
      var reg = /.+?(省|市|自治区|自治州|县|区|旗)/g
      this.ars = data.employeeAddress.match(reg);
      var arss = "";
      this.ars.forEach((a) =>{
        arss += a;
      })
      this.ruleForm.cascaderAddress = arss;
      console.log(arss);
      this.ruleForm.detailedAddress = data.employeeAddress.replace(this.ruleForm.cascaderAddress , "");
      this.oldRuleForm = this.ruleForm;
    },


    //获取部门职位树
    seldePostTree() {
      let params = new URLSearchParams();
      this.$api.seldePostTree(params)
        .then(res => {
          this.optionsTwo = res.data;
          for (let de of res.data) {
            if (de.deptName == this.ruleForm.employeeDepartment) {
              this.optionsPost = de.positionList;
            }
          }
        })
        .catch(err => {
          this.$message.error("页面出错，请联系管理员")
        })
    },  

    //联级改变职位
    upPost(data) {
      this.ruleForm.employeePosition = '';
      for (var de of this.optionsTwo) {
        if (this.ruleForm.employeeDepartment == de.deptID) {
          this.optionsPost = de.positionList;
          break;
        }
      }
    },


    //修改员工简单信息
    updateEmployeeInfo() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) {
          return;
        }
        var params = new URLSearchParams();
        params.append('ruleForm', JSON.stringify(this.ruleForm));
        params.append('userName', sessionStorage.getItem('userName'));
        this.$api
          .updateEmployeeInfo(params)
          .then((res) =>{
            if(res.code == 200){
              this.selEmDepartmentInfo();
              this.changeStyle('one');
              this.selworkStatusNum();
              this.closure('' , 'ruleForm');
            }else{
              this.$message({
                message: res.msg,
                type: 'warning'
              });
            }
          })
          .catch((err) =>{
            console.log(err);
            this.$message.error('页面报错，请联系管理员');
          })
      });
    },


    //跳转新增页面
    addEmployee(){
      this.$router.push({
        path: '/AddEmployee'
      })
    },
  },
  mounted() {
    this.selEmDepartmentInfo();
    this.changeStyle('one');
    this.selworkStatusNum();
  },
  watch: {
    deptNum() {
      this.selEmployeeInfo()
    },
    keyWord() {
      this.selEmployeeInfo()
    },
  }
}
;
</script>
<style scoped>
.basicInfo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.basicInfo_row_one {

  height: 10%;
  width: 99%;
  top: 2%;
}

.basicInfo_row_one_col_one {
  padding-left: 10px;
  text-align: left;
}

.basicInfo_row_one_col_two {
  text-align: right;
}

.basicInfo_row_three {
  width: 100%;
  height: 16%;
  padding-left: 10px;
  display: flex;
}

.basicInfo_row_three_div_one_one {
  height: 100%;
  width: 36%;
  /*border: 1px solid #42b983;*/
  border-radius: 5px;
  box-shadow: 0px 3px 6px #c4c4c4;
  box-sizing: border-box;
  display: flex;
}

.left_card_one {
  height: 100%;
  width: 70%
}

.left_card_two {
  height: 100%;
  width: 30%
}

.one_one_div_one {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 15px;
  padding-bottom: 15px;
  width: 100%;
  height: 100%;
  /*border: 1px solid #42b983;*/
  text-align: center;
  box-sizing: border-box;
}

.font_one {
  /*color: #0BB28F;*/
  color: #495060;

}

.font_two {
  /*color: #0BB27A;*/
  color: #495060;
  font-family: "软文雅黑";
  font-size: 40px;
  font-weight: bold;
}

.one_one_div_two {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  /*border: 1px solid #42b983;*/
}

.basicInfo_row_three_div_one_two {
  height: 100%;
  width: 36%;
  border-radius: 5px;
  margin-left: 2%;
  box-shadow: 0px 3px 6px #c4c4c4;
  box-sizing: border-box;
  display: flex;
}

.middle_card_one {
  height: 100%;
  width: 33.33%;
}

.one_two_div_one {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-top: 10%;
  width: 100%;
  height: 70%;
}

.basicInfo_row_three_div_one_three {
  height: 100%;
  width: 22%;
  margin-left: 2%;
  border-radius: 5px;
  box-shadow: 0px 3px 6px #c4c4c4;
  box-sizing: border-box;
  display: flex;
}

.right_card_one {
  height: 100%;
  width: 50%;
}

.one_three_div_one {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
}

.basicInfo_row_two {
  height: 63%;
  width: 100%;
  margin-top: 2%;
}

.row_one_input {
  width: 20%;
}

.row_one_select {
  width: 20%;
}

.button_four {
  background-color: #0BB278;
}

.basicInfo_row_four {
  text-align: center;
  height: 8%;
}

.el-drawer_div_one {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.el-drawer_div_two {
  position: absolute;
  bottom: 0px;
  width: 100%;
  box-shadow: 0 -2px 16px rgb(0 0 0 / 20%);
  height: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-drawer_div_two_button_one {
  border: 1px solid #888888;
  background-color: white;
  border-radius: 5px;
  height: 50%;
  width: 20%;
}

.el-drawer_div_two_button_two {
  border: 1px solid #0BB278;
  background-color: #0BB278;
  border-radius: 5px;
  height: 50%;
  width: 20%;
  color: white;
  margin-left: 5%;
}

.el-drawer_font {
  text-decoration: underline
}
</style>
<style>
.el-button + .el-button {
  margin-left: 0px;
}

.left_card_one:hover, .left_card_two:hover, .middle_card_one:hover, .right_card_one:hover {
  background-color: #f8f8f9;
  cursor: pointer;
}

.el-drawer_div_two_button_one:hover {
  cursor: pointer;
  color: #0BB278;
  border: 1px solid #0BB278;
}

.el-drawer_div_two_button_two:hover {
  cursor: pointer;
  background-color: #5cb496;
}

.el-select-dropdown__item.selected {
  color: #0BB278;
}

.el-pager li.active {
  color: #0BB278;
  cursor: default;
}

.el-drawer__header > :first-child {
  font-weight: bolder;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 20px;
  color: #000;
}

.demo-ruleForm {
  width: 80%;
}

.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 30px;
}

.el-input__inner:focus {
  border-color: #0BB278;
}
</style>
